<template>
    <div class="root">
      <el-button type="success" plain @click="toAdd">新增</el-button>
      <el-dialog v-model="dialogFormVisible" title="oms_company_address表单">
        <el-form :model="companyAddress">
          <el-form-item label="收货地址" :label-width="formLabelWidth">
            <el-input v-model="companyAddress.addressName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="默认发货地址" :label-width="formLabelWidth">
            <el-input v-model="companyAddress.sendStatus" autocomplete="off" />
          </el-form-item>
          <el-form-item label="是否默认收货地址" :label-width="formLabelWidth">
            <el-input v-model="companyAddress.receiveStatus" autocomplete="off" />
          </el-form-item>
          <el-form-item label="收发货人姓名" :label-width="formLabelWidth">
            <el-input v-model="companyAddress.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="收货人电话" :label-width="formLabelWidth">
            <el-input v-model="companyAddress.phone" autocomplete="off" />
          </el-form-item>
          <el-form-item label="省/直辖市" :label-width="formLabelWidth">
            <el-input v-model="companyAddress.province" autocomplete="off" />
          </el-form-item>
          <el-form-item label="市" :label-width="formLabelWidth">
            <el-input v-model="companyAddress.city" autocomplete="off" />
          </el-form-item>
          <el-form-item label="区" :label-width="formLabelWidth">
            <el-input v-model="companyAddress.region" autocomplete="off" />
          </el-form-item>
          <el-form-item label="详细地址" :label-width="formLabelWidth">
            <el-input v-model="companyAddress.detailAddress" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="confirm()"> 确定 </el-button>
          </span>
        </template>
      </el-dialog>
      <div class="table">
        <el-table :data="list" style="width: 100%">
          <el-table-column fixed prop="id" label="序号" width="80" align="center"/>
          <el-table-column prop="province" label="省/直辖市" width="80" align="center"/>
          <el-table-column prop="city" label="市" width="100" align="center"/>
          <el-table-column prop="region" label="区" width="100" align="center"/>
          <el-table-column prop="name" label="收货人姓名" width="250" align="center"/>
          <el-table-column prop="phone" label="收货人电话" width="100" align="center"/>
          <el-table-column prop="addressName" label="地址名称" width="100" align="center"/>
          <el-table-column prop="detailAddress" label="详细地址" width="80" align="center" />
          <el-table-column prop="sendStatus" label="默认发货地址" width="100" align="center"/>
          <el-table-column prop="receiveStatus" label="是否默认收货地址" width="80" align="center" />
          <el-table-column fixed="right" label="权限" width="150" align="center">
            <template #default="scope">
              <el-button type="info" plain size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
              <el-button type="danger" plain size="small"  @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
      style="padding: 30px 0; text-align: center"
      layout="sizes, prev, pager, next, jumper, ->, total, slot"
      @current-change="fetchData"
      @size-change="changeSize"
    />
    </div>
  </template>
    
    <script>
  import companyAddress from "@/http/oms_company_address";
  import { defineComponent } from "vue";
  
  export default defineComponent({
    data() {
      return {
        list: [],
        companyAddress: {},
        current:1,
        size:10,
        total:0,
        dialogFormVisible: false,
      };
    },
    mounted() {
      this.fetchData(1);
    },
    methods: {
      fetchData(page) {
        this.current = page
        const data = {current:this.current,size:this.size}
        companyAddress.page(data).then((res) => {
          console.log(res)
          this.list = res.data.page.records;
          this.total = res.data.page.total
        });
      },
      handleDelete(id) {
        ElMessageBox.confirm("您是否需要删除该地址?", "提示", {
          confirmButtonText: "ok",
          cancelButtonText: "no",
          type: "warning",
        })
          .then(() => {
            companyAddress.del(id).then((res) => {
              if (res.success) {
                ElMessage({
                  type: "success",
                  message: "删除成功",
                });
                this.fetchData(1);
              } else {
                ElMessage({
                  type: "error",
                  message: "网络出问题，联系管理员",
                });
              }
            });
          })
          .catch(() => {
            ElMessage({
              type: "warning",
              message: "取消删除",
            });
          });
      },
      handleEdit(id) {
        this.dialogFormVisible = true;
        companyAddress.one(id).then((res) => {
          this.companyAddress = res.data.help;
        });
      },
      toAdd() {
        this.companyAddress = {};
        this.dialogFormVisible = true;
      },
      confirm() {
        if (this.companyAddress.id == undefined) {
          companyAddress.add(this.companyAddress).then((res) => {
            if (res.success) {
              ElMessage({
                type: "success",
                message: "添加成功",
              });
              this.fetchData(1);
            } else {
              ElMessage({
                type: "error",
                message: "网络出问题，联系管理员",
              });
            }
            this.dialogFormVisible = false;
          });
        } else {
          companyAddress.edit(this.companyAddress).then((res) => {
            if (res.success) {
              ElMessage({
                type: "success",
                message: "编辑成功",
              });
              this.fetchData(1);
            } else {
              ElMessage({
                type: "error",
                message: "网络出问题，联系管理员",
              });
            }
          });
          this.dialogFormVisible = false;
        }
      },
      changeSize(size){
        this.size = size;
        this.fetchData(1)
      }
    },
  });
  </script>
    
    <style lang="scss" scoped>
  
  </style>
    